<div class="root">
    <!--header-->
    <div class="header">
        <!--背景-->
        <image resize="cover" class="shop-bg" :src="shopBg"></image>

        <div class="header-shop">
            <div class="shop-main">
                <image resize="cover" class="search-icon" :src="searchIcon" @click="goToSearch"></image>

                <image resize="cover" class="shop-logo" :src="shopLogo"></image>

                <div class="h-s-right">
                    <image resize="cover" class="wallet-icon" :src="walletIcon" @click="goToCoupon"></image>
                    <image resize="cover" class="order-icon" :src="orderIcon" @click="goToOrder"></image>
                </div>
            </div>

            <scroller show-scrollbar="false" scroll-direction="horizontal" class="shop-catalog">
                <text :class="['catalog-txt',stringifyObj(c) == stringifyObj(catalogType) ? 'catalog-txt-active' : 'catalog-txt-common']" v-for="c in catalogList" @click="sortClick(c)">{{c.name}}</text>
            </scroller>
        </div>
    </div>
    <!--/header-->

    <!--商品列表-->
    <div class="goods-wrapper">
        <goods-list :goodsList="goodsList" :hasLabel="catalogType.type == 'recommend' ? true : false" :listCompleted="listCompleted" :listLoaded="listLoaded" :loading="loading" @fetchMore="fetchMore">
            <div class="list-before" slot="listBefore" v-if="goodsList.length && catalogType.type == 'recommend' && clockNow && clockTarget">
                <text class="clock-txt font-msyhl">限时秒杀</text>

                <count-down :beginStr="clockNow" :endStr="clockTarget" @over="alarm"></count-down>
            </div>
        </goods-list>
    </div>

    <!--footer-->
    <footer-bar></footer-bar>
</div>
